
<template>
  <div class="single_p" @click="goUrl">
    <span class="label" v-if="label">[招]</span>
    <span class="arrow" v-if="arrow">></span>
    <span class="dot" v-if="dot"></span>
    <!-- <template v-if="color">
      <span :class="[color===1?'icon red':'icon blue']"></span>
    </template> -->
    <span class="info">{{ info }}</span>
    <span class="date" v-if="!nodate">[07-25]</span>
  </div>
</template>

<script>
export default {
  name: "SingleItem2",
  props: {
    label: String,
    arrow: String,
    info: String,
    url: String,
    // color: String,
    dot: String,
    nodate: String,
  },
  methods: {
    goUrl() {
      window.open(this.url);
    },
  },
};
</script>

<style scoped lang="scss">
.single_p {
    display: flex;
    align-items: center;
    color: #444444;
    padding: 1px 9px;
    cursor: pointer;
    line-height: 1.5;
}
.dot{
  width: 4px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background-image: url(../assets/dot.png);
  background-size: 100% 100%;
  margin: 0 10px 0 14px;
}
.label{
  color: #2270A7;
  margin-right: 6px;
}
.arrow{
  margin-right: 18px;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.icon {
  display: inline-block;
  width: 22px;
  height: 11px;
  margin-right: 10px;
}
.info {
  display: inline-block;
  // width: 194px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.date{
    margin-left: 20px;
    flex-shrink: 0;
}
</style>
